<template>
  <div class="bigPing">
    <div id="index" ref="appRef">
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <div class="d-flex jc-center top-box">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="d-flex jc-center">
              <dv-decoration-8
                class="dv-dec-8"
                :color="decorationColor"
                style="width: 450px; height: 120px"
              />
              <div class="title">
                <span class="title-text">中空四线大屏显示</span>
              </div>
              <div class="logo" @click="$router.back()">
                <img :src="company_logo" alt="" />
                {{ company_name }}
              </div>
              <div class="time">
                <span class="text"
                  >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
                >
              </div>
              <dv-decoration-8
                class="dv-dec-8"
                :reverse="true"
                :color="decorationColor"
                style="width: 450px; height: 120px"
              />
            </div>
            <dv-decoration-10 class="dv-dec-10-s" />
          </div>
          <div class="body-box">
            <dv-border-box-11 title="一号中空线" style="width: 25%">
              <div class="inner_box" style="width: 95%; height: 89%">
                <dv-scroll-board :config="configList[0]" style="height: 103%" />
              </div>
            </dv-border-box-11>
            <dv-border-box-11 title="二号中空线" style="width: 25%">
              <div class="inner_box" style="width: 95%; height: 89%">
                <dv-scroll-board :config="configList[1]" style="height: 103%" />
              </div>
            </dv-border-box-11>
            <dv-border-box-11 title="三号中空线" style="width: 25%">
              <div class="inner_box" style="width: 95%; height: 89%">
                <dv-scroll-board :config="configList[2]" style="height: 103%" />
              </div>
            </dv-border-box-11>
            <dv-border-box-11 title="四号中空线" style="width: 25%">
              <div class="inner_box" style="width: 95%; height: 89%">
                <dv-scroll-board :config="configList[3]" style="height: 103%" />
              </div>
            </dv-border-box-11>
          </div>
          <div class="bottom-text">©本系统由通用玻璃软件提供技术支持</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import { formatTime } from "@/utils/newDate.js";
import { mapState } from "vuex";
export default {
  mixins: [drawMixin],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
      configList: [],
    };
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
    this.getLineProductCard();
    setInterval(() => {
      this.getLineProductCard();
    }, 30000);
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    initData() {
      this.configList = this.rwdidNoList.map((item, index) => {
        return {
          header: ["流程卡", "客户", "状态", "级别"],
          data: item,
          index: true,
          columnWidth: [70, 150, 150, 100, 80],
          align: ["center", "center", "center", "center"],
          rowNum: 20,
          headerBGC: "#6d86c7",
          waitTime:3000,
          carousel: 'page'
        };
      });
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    async getLineProductCard() {
      let paramList = [
        {
          name: "中空线",
          id: 1,
        },
        {
          name: "中空线",
          id: 2,
        },
        {
          name: "中空线",
          id: 3,
        },
        {
          name: "中空线",
          id: 4,
        },
      ];
      await this.$store.dispatch("getDeviceMap", paramList);
      this.initData();
    },
  },
  computed: {
    ...mapState({
      rwdidNoList(state) {
        let arr = ["等待", "出片", "强制出片", "配片"];
        let list = [0,1,2]
        if (state.deviceStatus.deviceParams.length != 0) {
          return state.deviceStatus.deviceParams.map((item) =>
            item.object.rwdidNoList.map((a) => {
              return [
                a.cardcode,
                a.custom,
                a.outState == 1
                  ? `<span style="color:red;">${arr[a.outState]}</span>`
                  : arr[a.outState],
                
                a.optGlasses.some((a)=> list.includes(a.urgent))
                  ? `<span style="color:red;">${'加急'}</span>`
                  : '普通',
              ];
            })
          );
        } else {
          return [];
        }
      },
    }),
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/index";
.png {
  width: 96%;
  height: 94%;
  // margin: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  img,
  video {
    width: 100%;
    height: 100%;
  }
}
::v-deep .dv-border-box-11-title {
  letter-spacing: 15px;
}
.inner_box {
  display: flex;
  justify-content: center;
}
::v-deep .border-box-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bigPing {
  width: 100%;
  height: 100%;
  background-color: #010003;
}
.chartsLine {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-8%);
}
.bottom-box {
  width: 100% !important;
}
.company-name {
  font-size: 40px;
  letter-spacing: 3.5px;
}
.top-box {
  position: relative;
  height: 70px;
}
.time {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
}
.logo {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 18px;
  display: flex;
  align-items: center;
  img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
  }
}
.fullView {
  position: relative;
  flex: 1.4;
  margin: 180px 0px 0px 0px;
  padding-bottom: 0px;
  transform: translateY(-60px);
  .textTitle {
    width: 400px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: -80px;
    transform: translateX(-50%);
    font-size: 30px;
    letter-spacing: 10px;
    background-image: linear-gradient(to right, #007aff, #00dfff, #007aff);
    color: transparent;
    -webkit-background-clip: text;
    .sub-textTitle {
      display: flex;
      justify-content: center;
      margin-left: 10px;
    }
  }
}
.body-item-production {
  flex: 1;
}
.bottom-text {
  width: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  letter-spacing: 3px;
}
</style>
